<template>
  <div>
    <div>
      <el-tooltip effect="light" content="点击复制" placement="bottom">
        <i
          class="el-icon-copy-document tag-read"
          :data-clipboard-text="data.address"
          @click="copy"
        ></i>
      </el-tooltip>
      {{ address }}
    </div>
  </div>
</template>
<script>
import Clipboard from "clipboard";
export default {
  props: ["data"],
  data() {
    return {
      address: ""
    };
  },
  mounted() {
    if (this.data.address) {
      this.address = this.data.address;
    }
  },
  methods: {
    copy() {
      var clipboard = new Clipboard(".tag-read");
      clipboard.on("success", e => {
        this.$message.success("复制成功");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", e => {
        // 不支持复制
        this.$message.error("该浏览器不支持自动复制");
        // 释放内存
        clipboard.destroy();
      });
    }
  }
};
</script>
